import React, { Component } from 'react';
import {
  Table,
  Space,
  Button,
  Descriptions,
  Tag
} from 'antd';
import 'antd/dist/antd.css';
import 'moment/locale/zh-cn';
import {
  getDictionaryLabel,
} from '../../../rudexRou/OperatesCookie.js';
import { getUrl } from '../../../utils';
import { markingQueryPage } from '../../../api/exam';
import AdvancedSearchForm from '../../../componentJsx/common/searchForm';
import HasPermi from '../../../componentJsx/common/hasPermi';
import '../../../componentCss/component.css';
export default class EditExam extends Component {
  constructor (props) {
    super(props);
    this.state = {
      searchForm: [
        {
          type: 'select',
          name: '地域',
          code: 'region',
          options: getDictionaryLabel('addressConfig'),
        },
        {
          type: 'select',
          name: '考试状态',
          code: 'examStatus',
          options: getDictionaryLabel('examStatus'),
        },
        {
          type: 'select',
          name: '阅卷状态',
          code: 'markingStatus',
          options: getDictionaryLabel('markingStatus'),
        },
      ],
      tableColumns: [
        {
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          width: 120,
          fixed: 'left',
          ellipsis: true,
        },
        {
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 120,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 270,
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '考试状态',
          dataIndex: 'examStatus',
          key: 'examStatus',
          ellipsis: true,
          width: 80,
          render: (t, r) => {
            switch (t) {
              case 0:
                return <Tag color='#f50'>未考</Tag>;
              case 1:
                return <Tag color='#2db7f5'>考试中</Tag>;
              case 2:
                return <Tag color='#87d068'>已完成</Tag>;
              case 3:
                return <Tag color='#cd201f'>缺考</Tag>;
              default:
                break;
            }
          },
        },
        {
          title: '阅卷状态',
          dataIndex: 'markingStatus',
          key: 'markingStatus',
          ellipsis: true,
          width: 80,
          render: (text) => text ? getDictionaryLabel('markingStatus', text) : text
        },
        {
          title: '参考日期',
          dataIndex: 'startTime',
          key: 'startTime',
          ellipsis: true,
          width: 150,
        },
        {
          title: '考试成绩',
          dataIndex: 'score',
          key: 'score',
          ellipsis: true,
          width: 80,
        },
        {
          title: '是否通过',
          dataIndex: 'pass',
          key: 'pass',
          ellipsis: true,
          width: 80,
          render: (text) => text ? (text === '0' ? '不通过' : '通过') : ''
        },
        {
          title: '发布状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('testExamStatus', text) : text,
        },
        {
          title: '阅卷人',
          dataIndex: 'examinerName',
          key: 'examinerName',
          ellipsis: true,
          width: 80,
        },
        {
          title: '阅卷时间',
          dataIndex: 'markingTime',
          key: 'markingTime',
          ellipsis: true,
          width: 150,
        },

        {
          title: '操作',
          dataIndex: 'handle',
          ellipsis: true,
          width: 100,
          fixed: 'right',
          align: 'center',
          render: (_, record) => (
            <>
              <HasPermi
                bottonData={{
                  type: 'link',
                  size: 'small',
                  interceptor: 'tmfsExamPlatform:readingTask:marking',
                  disabled: record.status !== '0' || !record.endTime,
                  clickFn: () => this.marking(record),
                  text: '阅卷',
                }}
              />
            </>
          ),
        },
      ],
      selectedRowKeys: [],
      selectedRows: [],
      total: 0,
      columnNum: 6,
      pageSize: 10,
      page: 1,
      //数据
      tableData: [], //最新数据
      noMarkingData: [],
      markingData: [],
      table2Data: [],
      examinerOptions: [],
      isEditVisible: false,
      isPublishVisible: false,
      isUpdataExaminer: false,
      searchEmpModalVisible: false,
      searchTotal: 0,
      searchCurrentPage: 1,
      modelTitle: '已阅人员',
      confirmLoading: false, //确认按钮异步等待
      tableLoading: false,
      searchData: {
      },
      examData: null,
      examStatistical: {
        applicantNum: 0,
        examinationNum: 0,
        notExamNum: 0,
      },
      testexamId: '',
      selectModel: 1,
      currType: '',
      currentExaminer: {},
      currentMarking: {},
      checkedReader: '',
      readerList: [],
      addReaderList: [],
      empInfoList: [],
      bindStatus: null,
    };
  }

  componentWillMount () {
    let examData = JSON.parse(sessionStorage.getItem('examData'));
    this.setState({ examData: examData, testexamId: examData.id }, () => {
      this.initExamPage()
    });
  }
  componentDidMount () {

  }
  componentWillUnmount () {
  }
  // 发布成绩确认框
  showModal () {
    this.setState({ isPublishVisible: true })
  }
  //筛选搜索
  execSearch = (data) => {
    this.setState({ searchData: data, page: 1 }, () => {
      this.initExamPage();
    });
  };
  // 查询参考人员数据
  initExamPage () {
    const params = Object.assign({
      "currentPage": this.state.page,
      "pageSize": this.state.pageSize,
      "markingEmpNo": localStorage.getItem("empNo"),
      "testexamId": this.state.testexamId
    }, this.state.searchData)
    markingQueryPage(params).then(res => {
      const dataList = [];
      if (res.data.code === 200) {
        const list = res.data.data.list
        list.forEach(item => {
          if (item && item.examProcessDetailList && item.examProcessDetailList.length > 1) {
            const children = item.examProcessDetailList.slice(1, item.examProcessDetailList.length);
            children.forEach(child => {
              const obj = JSON.parse(JSON.stringify(item))
              delete obj.examProcessDetailList
              delete obj.id
              child = Object.assign(child, obj)
            })
            item = Object.assign(item, item.examProcessDetailList[0])
            item.children = children
          } else {
            Object.assign(item, item.examProcessDetailList[0])
          }
          dataList.push(item);
        });
        this.setState({ tableData: dataList,total:res.data.data.total })
      }
    })
  }
  //选择行
  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  }
  //修改页数changePage
  changePage = (page, pageSize) => {
    this.setState({ page, pageSize }, () => {
      this.initExamPage()
    });
  };
  marking = (record) => {
    sessionStorage.setItem('markingPaperData', JSON.stringify(record));
    getUrl('/TmfsExam/ReadingTask/ExamDetail/MarkingExam');
  };
  readerForm = React.createRef();
  render () {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div className='examWrap'>
        <div className="basicInfo">
          <Descriptions title="基本信息" column={this.state.columnNum} size="small">
            <Descriptions.Item label="考试名称">{this.state.examData.name}</Descriptions.Item>
            <Descriptions.Item label="考试级别">{getDictionaryLabel('examLevel', this.state.examData.level)}</Descriptions.Item>
            <Descriptions.Item label="有效期">{this.state.examData.validityBeginDate ? `${this.state.examData.validityBeginDate} - ${this.state.examData.validityEndDate}` : this.state.examData.validity === '1'
              ? '永久有效'
              : '一次性'}</Descriptions.Item>
            <Descriptions.Item label="考试开始时间">{this.state.examData.startTime}</Descriptions.Item>
            <Descriptions.Item label="总分">{this.state.examData.totalScore}</Descriptions.Item>
            <Descriptions.Item label="及格分">{this.state.examData.passScore}</Descriptions.Item>
            <Descriptions.Item label="评测类型">{getDictionaryLabel('testExamType', this.state.examData.type)}</Descriptions.Item>
            <Descriptions.Item label="考试时长">{this.state.examData.duration} min</Descriptions.Item>
            <Descriptions.Item label="题目数">{this.state.examData.questionNum}</Descriptions.Item>
            <Descriptions.Item label="创建人">{this.state.examData.createEmpName}</Descriptions.Item>
            <Descriptions.Item label="创建时间">{this.state.examData.createTime}</Descriptions.Item>
            <Descriptions.Item label="更新时间">{this.state.examData.updateTime}</Descriptions.Item>
          </Descriptions>
        </div>
        <div>
          <div>
            <div className='examTitle'>需阅卷人员</div>
            <div>
              <AdvancedSearchForm
                execSearch={this.execSearch}
                formData={this.state.searchForm}
              />
            </div>
          </div>
          <div>
            <Table
              rowKey='id'
              loading={this.state.lastLoading}
              style={{ marginTop: 10 }}
              scroll={{ x: '100' }}
              // rowSelection={{ type: 'checkbox', ...rowSelection }}
              columns={this.state.tableColumns}
              dataSource={this.state.tableData}
              pagination={{
                total: this.state.total,
                pageSize: this.state.pageSize,
                current: this.state.page,
                showSizeChanger: true,
                onChange: this.changePage,
                showTotal: (total) => '共 ' + total + ' 条',
              }}
              size='small'
            // bordered
            />
          </div>
        </div>
        <div>
          <Space>
            <Button
              onClick={() => {
                getUrl('/TmfsExam/ReadingTask');
              }}
            >
              返回
            </Button>
          </Space>
        </div>

      </div>
    );
  }
}
